<template>
	<div class="widget-poi-filter flex flex-wrap" :class="[direction]">
		<el-badge v-for="poi in switchOptions" :key="poi.value" :value="poi.remaining" :hidden="!poi.remaining"
			class="item">
			<div @click="$emit('input',poi.value)"
				class="black-bg widget-poi-filter-button button-panel hover-border-active"
				:class="{active:value===poi.value}">
				<div class="widget-poi-filter-button-icon primary-bg-dark round" v-if="poi.icon&&showIcon"
					:class="poi.icon" />
				{{poi.label}}
			</div>
		</el-badge>
	</div>
</template>

<script>
export default {
	name: "WidgetPoiFilter",
	props: {
		switchOptions: {
			type: Array,
			default: () => {
				return [];
			}
		},
		value: {
			type: String | Number,
			default: ""
		},
		showIcon: {
			type: Boolean,
			default: false
		},
		direction: {
			type: String,
			default: "left"
		}
	}
};
</script>

<style lang="scss" scoped>
.widget-poi-filter {
	.widget-poi-filter-button {
		margin-bottom: 8px;
		display: flex;
		align-items: center;
	}
	.widget-poi-filter-button-icon {
		padding: 4px;
		margin-right: 8px;
	}
	&.left .widget-poi-filter-button {
		margin-right: 8px !important;
	}
	&.right {
		justify-content: flex-end;
	}
	&.right .widget-poi-filter-button {
		margin-left: 8px !important;
	}
}
</style>